<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-09-09 17:11:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-03 16:39:36
-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>JS Bin</title>
	</head>

	<body>
		<span>foo</span>
		<div id="container">
			<div class="item item-1">1</div>
			<div class="item item-2">2</div>
			<div class="item item-3">3</div>
			<div class="item item-4">4</div>
			<div class="item item-5">5</div>
			<div class="item item-6">6</div>
			<div class="item item-7">7</div>
			<div class="item item-8">8</div>
			<div class="item item-9">9</div>
		</div>
		<span>bar</span>

		<style>
			span {
				font-size: 2em;
			}

			#container {
				/* grid 快级 */
				display: grid;
				/* 行内快级 */
				display: inline-grid;
			}

			.item {
				font-size: 2em;
				text-align: center;
				border: 1px solid #e5e4e9;
			}

			.item-1 {
				background-color: #ef342a;
			}

			.item-2 {
				background-color: #f68f26;
			}

			.item-3 {
				background-color: #4ba946;
			}

			.item-4 {
				background-color: #0376c2;
			}

			.item-5 {
				background-color: #c077af;
			}

			.item-6 {
				background-color: #f8d29d;
			}

			.item-7 {
				background-color: #b5a87f;
			}

			.item-8 {
				background-color: #d0e4a9;
			}

			.item-9 {
				background-color: #4dc7ec;
			}
		</style>
	</body>
</html>
